
<template>
  <div class="interface">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="接口详情" name="first">
        <f-detail :id='id' />
      </el-tab-pane>
      <el-tab-pane label="接口调试" name="second">
        <f-debug :id='id' />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import fDetail from "./detail";
import fDebug from "./debug";

export default {
  components:{
    fDetail,
    fDebug
  },
  props: {},
  data() {
    return {
      id: 0,
      activeName: "first",
      info: {}
    };
  },
  created() {
    this.id = this.$route.params.id;
  },
  methods: {

    handleClick(){

    }
  },
  computed: {

  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.interface {
  margin: 1%;
  .title-info {
    font-weight: 400;
    margin-top: 0.48rem;
    margin-bottom: 0.16rem;
    border-left: 3px solid #2395f1;
    padding-left: 8px;
  }
  .content-info {
    margin: 8px 0;
    padding: 5px;
    width: 70%;
    box-sizing: border-box;
    .el-col {
      line-height: 32px;
    }
    .colKey {
      font-weight: 700;
      text-align: left;
      width: 100px;
      padding-left: 10px;
    }
    .colName {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
